<template>
    <div class="user-management-container">
        <!-- 左侧组织管理 -->
        <div class="left-panel">
            <h3>组织管理</h3>
            <el-tree :data="datas" :props="defaultProps" @node-click="handleNodeClick"
                style="max-width: 100%; margin-top: 10px;" default-expand-all />
        </div>

        <!-- 右侧用户管理 -->
        <div class="right-panel">
            <h3>用户管理</h3>

            <!-- 搜索表单 -->
            <el-form :inline="true" :model="dataps" class="search-form" v-if="isshows">
                <el-form-item label="用户账号">
                    <el-input v-model="dataps.UserName" clearable />
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="dataps.UserNickname" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="GetAccount">查询</el-button>
                </el-form-item>
            </el-form>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <el-icon style="margin-left: 10px; cursor: pointer;">
                    <ZoomOut @click="show" />
                </el-icon>
                <el-icon style="margin-left: 10px; cursor: pointer;">
                    <Refresh @click="GetAccount()" />
                </el-icon>
            </div>

            <!-- 用户表格 -->
            <el-table :data="data" border style="width: 100%; margin-top: 10px;">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="userName" label="用户账号" />
                <el-table-column prop="userNickname" label="用户名称" />
                <el-table-column prop="iocn" label="头像" width="100">
                    <template v-slot="scoped">
                        <img v-if="scoped.row.iocn" :src="scoped.row.iocn" alt=""
                            style="width: 40px; height: 40px; border-radius: 50%;">
                        <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="默认头像"
                            style="width: 40px; height: 40px; border-radius: 50%;">
                    </template>
                </el-table-column>
                <el-table-column prop="factoryName" label="工厂名称" />
                <el-table-column prop="oranCord" label="组织结构" />
                <el-table-column prop="sex" label="性别">
                    <template v-slot="scoped">
                        {{ scoped.row.sex ? "男" : "女" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template v-slot="scoped">
                        <el-button size="small" @click="UpdateAccount(scoped.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="DelAccount(scoped.row.userId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">共 {{ page.totalCount }} 条数据</div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="编辑用户" width="500">
        <el-form :model="forms">
            <el-form-item label="用户账号">
                <el-input v-model="forms.userName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="用户真实姓名">
                <el-input v-model="forms.userNickname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="工厂">
                <el-select v-model="forms.factoryId">
                    <el-option v-for="item in factorus" :label="item.factoryName" :value="item.factoryId" />
                </el-select>
            </el-form-item>
            <el-form-item label="组织框架">
                <el-select v-model="forms.deptId">
                    <el-option v-for="items in Orancat" :label="items.oranCord" :value="items.oranId" />
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="forms.sex">
                    <el-radio :value="true">男</el-radio>
                    <el-radio :value="false">女</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="UpdateAccounts">
                    更新
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { APIs } from '../../Http/http'
import { useCounterStore } from '../../stores/counter'
import { EditPen, Delete, ZoomOut, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
const store = useCounterStore();
const page = ref({
    pageIndex: 1,
    pageSize: 2,
    total: 0,
    totalCount: 0
})

const isshows = ref(false)
const show = () => {

    if (isshows.value == false) {
        isshows.value = true;

    }
    else {
        isshows.value = false;

    }
}
const dataps = ref({
    UserName: "",
    UserNickname: "",
    CreateName: "",
    StartTime: "",
    EndTime: "",
    RoleId: store.Users.rouleId,
    IsSuperAdmin: ''
})

const data = ref([{
    "userId": 1,
    "userName": "test",
    "userNickname": "招商管理员",
    "iocn": "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    "factoryId": 1,
    factoryName: "苏州XX电子有限公司",
    "sex": true,
    "dataid": 1,
    "oranCord": "",
    "createName": "管理员",
    "createTime": "2025-09-03T15:48:54.886653"
}])

const GetAccount = () => {
    APIs.get("/api/Read/GetAccount", {
        params: {
            pageIndex: page.value.pageIndex,
            pageSize: page.value.pageSize,
            total: page.value.total,
            totalCount: page.value.totalCount,
            UserName: dataps.value.UserName,
            UserNickname: dataps.value.UserNickname,
            CreateName: dataps.value.CreateName,
            EndTime: dataps.value.EndTime,
            RoleId: dataps.value.RoleId,
        }
    }).then(res => {
        data.value = res.data.data.data;
        page.value.total = res.data.data.total;
        page.value.totalCount = res.data.data.totalCount;
    })
}

const DelAccount = (mid: number) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '警告',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            APIs.delete("/api/Write/AccountDel", { params: { id: mid } }).then(res => {
                if (res.data.code == 100) {
                    ElMessage.success("删除成功");
                    GetAccount();
                }
                else {
                    ElMessage.error("删除失败");
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })

}

const forms = ref({
    "createName": "string",
    "createTime": "2025-09-05T07:29:59.450Z",
    "updateName": "string",
    "updateTime": "2025-09-05T07:29:59.450Z",
    "deleteName": "string",
    "deleteTime": "2025-09-05T07:29:59.450Z",
    "isDel": true,
    "userId": 0,
    "userName": "",
    "userPass": "",
    "userNickname": "",
    "iocn": "",
    "factoryId": "",
    "sex": true,
    "deptId": ""
})

const dialogFormVisible = ref(false)

const UpdateAccount = (account: any) => {
    // APIs.put("/api/Write/AccountUpdate", {data:account})
    dialogFormVisible.value = true
    forms.value.userId = account.userId
    forms.value.userName = account.userName
    forms.value.userNickname = account.userNickname
    forms.value.deptId = account.dataid
    forms.value.factoryId = account.factoryId
    forms.value.sex = account.sex
    forms.value.iocn = account.iocn
    forms.value.userPass = account.userPass
    forms.value.isDel = account.isDel
    forms.value.createName = account.createName
    forms.value.createTime = account.createTime
    forms.value.userPass = account.userPass
}

const factorus = ref<any>({
})

const getFactory = () => {
    APIs.get("/api/Read/FactorySelect").then(res => {
        factorus.value = res.data.data;
    })
}

const Orancat = ref<any>({

})

const GetOran = () => {
    APIs.get("/api/Read/OrcanSelect").then(res => {
        Orancat.value = res.data.data;
    })
}

const UpdateAccounts = () => {
    APIs.put("/api/Write/AccountUpdate", { data: forms.value }).then(res => {
        if (res.data.code == 100) {
            ElMessage.success("更新成功");
            dialogFormVisible.value = false
            GetAccount();

        }
        else {
            ElMessage.error("更新失败");
            dialogFormVisible.value = false
        }
    })
}


interface Tree {
    label: string
    children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const datas = ref([])

const GetTree = () => {
    APIs.get("/api/Read/TreeGet").then(res => {
        datas.value = res.data.data;
    })
}


const defaultProps = {
    children: 'children',
    label: 'label',
}
// 分页处理函数
const handleSizeChange = (val: number) => {
    page.value.pageSize = val;
    GetAccount();
}

const handleCurrentChange = (val: number) => {
    page.value.pageIndex = val;
    GetAccount();
}

onMounted(() => {
    GetAccount();
    GetTree();
    getFactory();
    GetOran();
})

</script>

<style scoped>
.user-management-container {
    display: flex;
    height: 100%;
    padding: 20px;
}

.left-panel {
    width: 200px;
    margin-right: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
}

.right-panel {
    flex: 1;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 15px;
    background-color: #fff;
}

.left-panel h3,
.right-panel h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}

.search-form {
    margin-bottom: 15px;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 15px;
}

.action-buttons .el-button {
    margin-left: 10px;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.pagination-info {
    font-size: 14px;
    color: #606266;
}

/* 确保el-icon可以被点击 */
.el-icon {
    cursor: pointer;
}

.el-icon:hover {
    color: #409eff;
}
</style>